<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style type="text/css">
			.test{
				display: none;
				width: 150px;
				height: 30px;
				float: left;
				line-height: 30px;
				text-align: center;
				margin-left: 5px;
			}
			#please{
				color: red;			
			}
			#please2{
				color: hotpink;
			}
			#register{
				width: 100px;
				height: 30px;
				margin-top: 10px;
				display: block;
			}
			#username{
				display: block;
				float: left;
			}
			#name{
				display: block;
				float: left;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//1.抓元素
				var username = document.getElementById("username");
				var please = document.getElementById("please");
				var please2 = document.getElementById("please2");
				
				//2.给文本框加获得焦点事件
				username.onfocus = function(){
					please2.style.display = 'block'
				}
				
				//3.给文本框失去焦点事件
				username.onblur = function(){
					please2.style.display = 'none';
					//4.获得文本框字符长度
					var len = username.value.length;
					if(len==0){
						please.style.display = 'block';
					}else{
						please.style.display = 'none';
					}
				}
			}
		</script>
	</head>
	<body>
		<form action="">
			<span id="name">用户名：</span>
			<input type="text" id="username">
			<span id='please' class="test">请输入用户名</span>
			<span id="please2" class="test">用户名必须是字母</span>
			<br />
			<input type="submit" value="注册" id="register"/>
		</form>
	</body>
</html>
